<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>canvas图片合并</title>
</head>
<body>
<script type='text/javascript'>
    // ---------------功能 2张图片合成一张图片---------------
    // 提示： canvas类似画布,先对画布设置宽高等属性，然后通过canvas.getcontext()获得操作鼠标。
    // 通过操作鼠标具体操作多种画图工具进行属性样式作图，具体过程类似ps作图
    // * 移动端基于微信公众号开发，生成的图片可以唤起“保存图片”功能，但是点击“保存图片”没有反应
    // * 解决方法：(1)canvas画完图之后要生成base64图片；动态添加到 img 的src中 toDataURL();
    // *          (2)跨域问题，一定给img对象添加 img.crossOrigin='anonymous';


    // 开始从作图屌丝到高富帅，老司机开车了
    // 1、加载本地图片
    // headImg = './images/head.png'
    // bgImg = './images/bg.jpg'
    // or 加载网络图片
    // 解决跨域问题  img.crossOrigin='anonymous';
    // 等待图片加载完成  const img = new Image()  img.url = '图片地址' img.onload = () => { 加载回调处理 }
    const headImg = asyncLoadImg("./images/head.png", "./images/bg.jpg").then(function (e) {
        console.log(e)
        // 2、 创建canvas画布
        const canvas = document.createElement('canvas');
        document.body.appendChild(canvas);
        canvas.width = e[1].width;
        canvas.height = e[1].height;
        canvas.style.backgroundColor = 'red';
        // 3、 获得canvas画布操作鼠标对象
        const ctx =  canvas.getContext('2d'); // 2d 平面图,3d 立体图
        ctx.drawImage(e[1], 0,0);
        ctx.drawImage(e[0], (e[1].width-e[0].width)/2,(e[1].height-e[0].height)/2);
    })

    function asyncLoadImg(img1, img2) {
     return Promise.all([getImagas(img1), getImagas(img2)])
    }
    function getImagas(imgUrl) {
      return new Promise(function (resolve, reject) {
          const img = new Image();
          img.src = imgUrl;
          img.onload = function () {
              resolve(img)
          }
      })
    }
</script>
</body>
</html>